<template>
    <div class="cmitem">
        <el-form-item label="初始点赞数" prop="initlikeno">
            <el-input v-model.number="localFormData.initlikeno" placeholder="请输入初始点赞数" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="初始观看数" prop="initviewno">
            <el-input v-model.number="localFormData.initviewno" placeholder="请输入初始观看数" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="初始在线数" prop="initonlineno">
            <el-input v-model.number="localFormData.initonlineno" placeholder="请输入初始在线数" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="展示视频名称" prop="ifshowseriesname">
            <el-radio key="1" :label="1" :value="1" v-model="localFormData.ifshowseriesname">是</el-radio>
            <el-radio key="0" :label="0" :value="0" v-model="localFormData.ifshowseriesname">否</el-radio>
        </el-form-item>
        <br>
        <el-form-item prop="goodsids" label="关联商品" style="width:100%" v-if="localFormData.mediaid == undefined">
            <ul class="liveimglist">
                <li v-for="(goodsInfo,index) in localFormData.goodsList" :key="goodsInfo.goods_id">
                    <el-image :src="goodsInfo.imgurl_720"
                        :initial-index="index"
                        fit="scale-down" style="width:100%;height:100px"
                    />
                    <h5 class="gtitle txtclamp2">{{goodsInfo.goods_name}}</h5>
                    <div class="gsubtitle">
                        <span>ID {{goodsInfo.goods_id}}</span>
                        <a
                            href="javascript:;"
                            @click="handleDeleteGoods(index)"
                            onmouseover="this.style.color='#f56c6c'"
                            onmouseout="this.style.color='#333'"
                        >
                            删除
                        </a>
                    </div>
                </li>
                <li class="imgplus" @click="handleGoodsList">
                    <div>
                    <el-icon>
                        <plus />
                    </el-icon>
                    <!-- <p style="color:#999" class="m-b-0 m-t-10">添加封面</p> -->
                    </div>
                </li>
            </ul>
        </el-form-item>
    </div>
    <media-rel-goods
        ref="mediaRelGoodsRef"
        :relGoodsVisible="mediaRelGoodsVisible"
        relGoodsOperationType="mediaCreate"
        @cancelRelGoodsDialog="cancelRelGoodsDialog"
        @handleConfirmSelectedGoodsRes="handleConfirmSelectedGoods"
    />
</template>

<script>
    import {ref, toRef, reactive, provide, nextTick} from 'vue'
    import {Plus} from '@element-plus/icons'
    // import MediaRelGoods from '../MediaRelGoods.vue'
    import MediaRelGoods from "../MediaRelGoods/index";
    export default {
        name: "",
        components: {
            Plus,
            MediaRelGoods
        },
        props: {
            formData: {
                type: Object
            },
        },
        setup(props) {
            const localFormData = toRef(props, 'formData')

            localFormData.value.ifshowseriesname = 1
            const relGoodsFormData = reactive({
                mediaid: undefined,
                seriesid: undefined,
                datas: []
            })
            const goodsIds = ref([])
            provide('goodsIds', goodsIds)
            provide('relGoodsFormData', relGoodsFormData)

            const mediaRelGoodsVisible = ref(false)
            const mediaRelGoodsRef = ref('')
            const cancelRelGoodsDialog = () => {
                mediaRelGoodsVisible.value = false
            }

            const handleGoodsList = () => {
                relGoodsFormData.datas = []
                mediaRelGoodsVisible.value = true
                nextTick(() => {
                  mediaRelGoodsRef.value.init()
                })
            }
            const handleConfirmSelectedGoods = (data) => {
                if(data.length > 0){
                    /*console.log(data)
                    console.log(localFormData.value.goodsids)
                    console.log(goodsList.value)*/
                    localFormData.value.goodsids == undefined ? localFormData.value.goodsids = [] : ''
                    localFormData.value.goodsList == undefined ? localFormData.value.goodsList = [] : ''
                    data.forEach(goodsInfo => {
                        if(localFormData.value.goodsids.indexOf(goodsInfo.goods_id) < 0){
                            localFormData.value.goodsList.push(goodsInfo)
                            localFormData.value.goodsids.push(goodsInfo.goods_id)
                        }
                    })
                    goodsIds.value = localFormData.value.goodsids
                    /* console.log(data)
                    console.log(localFormData.value.goodsids)
                    console.log(goodsList.value)*/
                }
            }
            const handleDeleteGoods = ( goodsIndex ) => {
                localFormData.value.goodsids.splice(goodsIndex,1)
                localFormData.value.goodsList.splice(goodsIndex,1)
                goodsIds.value = localFormData.value.goodsids
            }
            return {
                localFormData,
                mediaRelGoodsVisible,
                mediaRelGoodsRef,
                cancelRelGoodsDialog,
                handleGoodsList,
                handleConfirmSelectedGoods,
                handleDeleteGoods,
            }
        }
    }
</script>

<style scoped  lang="scss">
:deep(.upload-box .el-upload-list--picture-card .el-upload-list__item){
    margin-bottom: -15px;
}
:deep(.upload-box .el-upload--picture-card){
    border: none;
}
.liveimglist{
    display: flex;
    flex-wrap: wrap;
    line-height: initial;
    li {
        position: relative;
        width: 160px;
        margin-right: 15px;
        margin-bottom: 10px;
        display: block;
        border-radius: 4px;
        .el-image{
            border:1px solid rgba(153, 153, 153, 0.4);
            border-radius: 4px;
        }
        .edit-image{
        display: flex;
        position: absolute;
        bottom:0;
        right:0;
        padding: 4px 9px;
        color:#fff;
        font-size: 12px;
        background-color: rgba(0,0,0,0.6);
        };
        .delete-image {
        display: flex;
        position: absolute;
        top:0;
        right:0;
        padding: 3px;
        .el-icon{
            font-size:20px;
        }
        }
        .gtitle{
            margin: 5px 0 2px;
            height:42px;
            font-size: 14px;
            font-weight: bold;
            color:#333;
        }
        .gsubtitle{
            font-size: 12px;
            color:#666;
            display:flex;
            justify-content: space-between;
        }
    }
    li.imgplus{
        >div{text-align: center;line-height:normal;}
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items: center;
        width: 160px;
        height: 100px; overflow: hidden;
        border: 1px dashed rgba(153,153,153,0.4);
        background: rgba(222,222,222,0.4); cursor: pointer;
        .el-icon{font-size: 28px;color:#999;}
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
}
</style>
